<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<title>${name_china}管理列表</title>
<%@include file="/common/head.jsp"%>

<!-- 时间日期插件 -->
<link
	href="<%=request.getContextPath()%>/static/plugin/My97DatePicker/skin/default/datepicker.css"
	rel="stylesheet">
<script
	src="<%=request.getContextPath()%>/static/plugin/My97DatePicker/WdatePicker.js"></script>
	
<link href="<%=request.getContextPath()%>/static/plugin/jqueryPagination/css/pagination.css"
	rel="stylesheet">
<script src="<%=request.getContextPath()%>/static/plugin/jqueryPagination/js/pagination.min.js"></script>
	
<style>
.field-title {
	display: block;
	float: left;
	line-height: 30px;
	margin-top: 10px;
}

.fildrange {
	display: flex;
	line-height: 30px;
}

.sameradio {
	margin-top: 10px;
	margin-left: 10px;
}
/****多选模块****/
.selemodule {
	display: inline-flex;
	margin-top: 15px;
	line-height: 30px;
}

.checkall {
	font-size: 16px;
}

.checkall>input {
	margin-right: 6px;
}

.samebutton {
	width: 100px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	color: #fff;
	margin-left: 10px;
	cursor: pointer;
}

.sty1 {
	background: #1f95ef;
}

.sty2 {
	background: #1eae31;
}

.sty3 {
	background: #0474c8;
}

.sty4 {
	background: #f86b67;
}

.sty5 {
	background: #37acc1;
}
/****表格数据****/
.chartable {
	width: 100%;
	height: 100%;
	overflow: auto;
}

.sametbale-li {
	width: 28%;
	margin-left: 10px;
	float: left;
	border: solid 1px #ccc;
	margin-top: 10px;
}

.sametableimg {
	margin: 0 auto;
	height: 250px;
}

.sametableimg>img {
	width: 100%;
	height: 100%;
}

.sametablename {
	margin-top: 10px;
	padding: 0 15px;
	-webkit-box-orient: vertical;
	/* -webkit-line-clamp: 1; */
	text-overflow:ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
/***价格**/
.sametbaleprice {
	padding: 0 15px;
	margin-top: 10px;
}

.vocherprice {
	margin-left: 9px;
	color: red;
}

.redpacket {
	float: right;
	color: red;
}
/****活动模块*****/
.activemod {
	padding: 0 15px;
	margin-top: 10px;
	display: inline-flex;
}

.sameactivebut {
	width: 58px;
	height: 18px;
	border: solid 1px #ff0000;
	line-height: 18px;
	text-align: center;
	margin-left: 10px;
	color: #ff0000;
	cursor: pointer;
}

.sameactivebut:nth-child(1) {
	margin-left: 0px;
}

.pitchbut {
	background: #ff0000;
	color: #fff;
}
/***佣金*****/
.commismod {
	padding: 0 15px;
	margin-top: 10px;
	overflow: auto;
	zoom: 1;
}

.commrate {
	float: left;
}

.commnum {
	float: right;
}

.stock {
	margin-top: 2px;
}
/***选项模块***/
.optionmod {
	margin-top: 30px;
	display: inline-flex;
	width: 100%;
}

.sameoptionsty {
	width: 33%;
	height: 36px;
	background: #0474c8;
	margin-left: 4px;
	line-height: 36px;
	color: #fff;
	text-align: center;
	cursor: pointer;
}

.sameoptionsty:nth-child(1) {
	margin-left: 0px;
}

.sortname {
	width: 26%;
	color: #555;
	padding-left: 3px;
	margin-left: 5px;
}

.shelf {
	width: 49%;
	height: 36px;
	background: #0474c8;
	line-height: 36px;
	text-align: center;
	color: #fff;
}

.hoverself {
	background: #8191a6;
}
/****选中*****/
.pitchbox {
	position: absolute;
}
.headcon{
    width: 100%;
    border-bottom: solid 1px #0288d1;
}
.top-batch{
	width:100%;
	line-height:34px;
}
</style>
</head>
<body class="iframe-page">
	<div class="page-title-wrapper">
		<div class="page-title">
			<div class="page-title-text">
				<span>${name_china}管理</span>
			</div>
			<div id="toolbar" style="float: right"></div>
		</div>
		<div class="page-title-border"></div>
	</div>
	
	<table class="summer-datagrid" style="width:auto">
	
	    <thead class="orderhead">
	    	<tr>
	    		<th style="width:100px;"><div class="top-batch"><a id="toMain" href="javascript:;">店主推荐</a></div></th>
	    		<th  style="width:100px;"><div class="top-batch  pitchbut"><a id="toGoods" href="javascript:;">选品</a></div></th>
	    	</tr>
	    </thead>		
	</table>
	<div class="search-field">
		
		<span class="field-cont"> <span class="field-cont-title">至</span>
			<input type="text" class="summer-input" id="name" />
		</span><br />
		<div class="fildrange">
			<span class="field-title">范围</span>
			<div class="sameradio">
				<span class="sameitle">全部</span> <input type="radio">
			</div>
			<div class="sameradio">
				<span class="sameitle">天猫</span> <input type="radio">
			</div>
			<div class="sameradio">
				<span class="sameitle">淘宝</span> <input type="radio">
			</div>
			<div class="sameradio">
				<span class="sameitle">京东</span> <input type="radio">
			</div>
		</div>
		<div class="fildrange">
			<span class="field-cont"> <span class="field-cont-title">品牌</span>
				<input type="text" class="summer-input" id="name" />
				<input type="hidden" id="userId" name="userId" class="summer-input summer-validatebox"/>
				<input type="hidden" id="storeId" name="storeId"/><!-- 店铺ID -->
			</span> <span class="field-cont"> <span class="field-cont-title">上架时间</span>
				<input type="text" class="summer-input" id="name" />
			</span> <span class="field-cont"> <span class="field-cont-title">至</span>
				<input type="text" class="summer-input" id="name" />
			</span>
		</div>

		<span class="field-btn-wrapper"> <a id="search"
			class="btn btn-primary btn-icon wave distance-right"><i
				class="icon icon-search"></i></a> <a id="reset"
			class="btn btn-icon wave wave-dark"><i class="icon icon-refresh"></i></a>
		</span> <br />
		
	</div>
	
	<!-- -列表- -->
	<div id="t-tbale">
		<ul class="chartable">
		</ul>
	</div>
	
	<div id="pagination_3"></div>

	<script>
	//请求url
	var CONST_URL = {
		LIST: basePath + '${common_url}list',
		TO_GOODS: basePath + '${common_url}toGoods',
		TO_MAIN: basePath + '${common_url}initGoods'
	}; 
	
    var  editData,
    	 permission = CommonUtil.getPermission('${name_english}');
    
    $(function () {
    	editData = ${editData};
    	$('#storeId').val(${storeId});
    	 $('#form').form({
         	onLoadSuccess:function(data){
            }
         }).form('loadDataEdit', {
             data: editData
         });
        //重置按钮
        $('#reset').on('click', function () {
        	//重置文本框的值
        	$('#name').val('');
        });
        $('#toGoods').on('click',toGoods);
        $("#toMain").on('click',toMain);
        //删除
		$('#t-wrap').on('click', 'a[data-permit="${name_english}:del"]', function() {
			var $this = $(this),
			    id = $this.closest('tr').find('td[data-field="id"]').attr('data-value');
			$.sdialog({
				type: 'confirm',
				msg: '您确定要删除选中的记录吗?',
				onConfirm: function(result) {
				    if (result) {
				    	$.sajax({
			                url : CONST_URL.DEL + "?id=" + id,
			                onLoadSuccess : function() {
			                	 $.stip({
                	                type:'ok',//显示类型 有info、 ok、 danger
                	                text: '删除成功！'    
			                	});
			                }
			            });
				    		
				    }	
				}
			});
		});
        
        
		creakTable(1,12);
        
		$("#pagination_3").whjPaging({
            pageSizeOpt: [
                {'value': 12, 'text': '12条/页', 'selected': true},
                {'value': 15, 'text': '15条/页'},
                {'value': 18, 'text': '18条/页'},
                {'value': 21, 'text': '21条/页'}
            ],
            totalPage: 18,
            showPageNum: 5,
            firstPage: '首页',
            previousPage: '上一页',
            nextPage: '下一页',
            lastPage: '尾页',
            skip: '跳至',
            confirm: '确认',
            refresh: '刷新',
            totalPageText: '共{}页',
            isShowFL: true,
            isShowPageSizeOpt: true,
            isShowSkip: true,
            isShowRefresh: true,
            isShowTotalPage: true,
            isResetPage: false,
            callBack: function (currPage, pageSize) {
                console.log('currPage:' + currPage + '     pageSize:' + pageSize);
                creakTable(currPage,pageSize)
            }
        });
    });
    function toMain(){
    	var storeId = $('#storeId').val();
		window.location.href = CONST_URL.TO_MAIN+"?storeId="+storeId;
    }
    function toGoods(){
    	var storeId = $('#storeId').val();
		window.location.href = CONST_URL.TO_GOODS+"?storeId="+storeId;
    }
    function creakTable(currPage,pageSize){
    	$.ajax({
   			url: CONST_URL.LIST,
   			type: 'POST',
   			dataType: 'json',
   			data:{
   				"start": currPage*pageSize,
   				"length" : pageSize,
   				"codeid" : $("#codeid").val(),
   				"storeId" : $('#storeId').val()
   			},
   			success:function(data){ 
   				var str="";
   				var data = data.data
				for(var i=0 ;data.length > i ; i++ ){
					str+='<li class="sametbale-li">';
					str+='	<div class="sametableimg"><input type="checkbox" class="pitchbox"><img src="'+data[i].mainImageUrl+'"></div>';
					str+='	<div class="sametablename">'+data[i].goodsName+'</div>';
					str+='	<div class="sametbaleprice">';
					str+='<span class="costprice">原价:'+data[i].price+'元</span>';
					str+='<span class="vocherprice">券后价：'+data[i].conPrice+'元</span>';
					str+='<span class="redpacket">20红包券</span>';
					str+='</div>';
					str+='<div class="activemod">';
					str+='	<div class="sameactivebut ';
							if(data[i].isHot==1){str+='pitchbut';}
					str+='">爆款</div>';
					str+='	<div class="sameactivebut ';
							if(data[i].isRecommend==1){str+='pitchbut'}
					str+='">推荐</div>';
					str+='	<div class="sameactivebut '
							if(data[i].isJingping==1){str+='pitchbut'}
					str+='">精选</div>';
					str+='</div>';
					str+='<div class="commismod">';
					str+='	<div class="commrate">佣金比例：'+data[i].wlCommission+'</div>';
					str+='	<div class="commnum">佣金：'+data[i].wlPrice+'</div>';
					str+='</div>';
					str+='<div class="commismod stock">';
					str+='	<div class="commrate">库存：'+data[i].totalInventorys+'</div>';
					str+='	<div class="commnum">订单数：'+data[i].totalSales+'</div>';
					str+='</div>';
					str+='<div class="optionmod">';
					str+='<div class="sameoptionsty">下架</div>';
					str+='<div class="sameoptionsty">排序<input type="text" class="sortname"></div>';
					str+='<div class="sameoptionsty">编辑</div>';
					str+='</div>';
					str+='</li>';
				}
   				$(".chartable").html(str);
        	 },  
        	error: function (XMLHttpRequest, textStatus, errorThrown) {
               // 状态码
               console.log(XMLHttpRequest.status);
               // 状态
               console.log(XMLHttpRequest.readyState);
               // 错误信息   
               console.log(textStatus);
           }
   		});
    }
    
</script>
</body>
</html>